<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{width:100px;height:100px;}
    </style>
</head>
<body>
    <div class="box" style="border: solid 2px black">123</div>
</body>
<script>

    var oBox = document.querySelector(".box");
    console.log(oBox);

    // 行内样式
    
    // 获取：
    // console.log(oBox.style.border);
    // 行内样式操作 不可以 获取非行内样式
    // console.log(oBox.style.width);

    // 设置
    // oBox.style.border = "solid 20px red";
    // oBox.style.color = "green";
    // oBox.style.fontSize = "50px";
    // oBox.style.width = "200px";


    // 非行内样式
    // console.log( window.getComputedStyle(oBox) )
    // console.log( window.getComputedStyle(oBox).width )
    // console.log( window.getComputedStyle(oBox).height )
    // 非行内样式操作 可以 获取行内样式
    // console.log( window.getComputedStyle(oBox).border )
    // 非行内样式操作，不能设置，只能获取
    // window.getComputedStyle(oBox).width = "200px";


    // console.log( getComputedStyle );
    // console.log( oBox.currentStyle );


    function getStyle(ele, attr){
        if( ele.currentStyle ){
            return ele.currentStyle[attr];
        }else{
            return getComputedStyle(ele)[attr];
        }
    }

    console.log( getStyle(oBox, "width") )
    console.log( getStyle(oBox, "height") )
    console.log( getStyle(oBox, "border") )




    
    
</script>
</html>